<template>
  <div class="fx-tag" :class="[size,type,theme]">
    <div class="content" :class="{mr10:closable}">
      <slot></slot>
    </div>
    <div class="close" v-if="closable" @click="closeClick">
      <i class="iconfont icon-multiply fs10"/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, SetupContext } from 'vue'
import {
  ComponentSize,
  componentSizeArr,
  ComponentTheme,
  componentThemeArr,
  ComponentTypes,
  componentTypesArr
} from '@/base/types'

interface TagProps {
  size: ComponentSize,
  type: ComponentTypes,
  closable: boolean,
  theme: ComponentTheme
}

export default defineComponent({
  name: 'FTag',
  props: {
    // 大小
    size: {
      type: String as PropType<ComponentSize>,
      default: 'default',
      validator (val: ComponentSize): boolean {
        return componentSizeArr.includes(val)
      }
    },
    // 类型
    type: {
      type: String as PropType<ComponentTypes>,
      default: 'primary',
      validator (val: ComponentTypes): boolean {
        return componentTypesArr.includes(val)
      }
    },
    // 类型
    theme: {
      type: String as PropType<ComponentTheme>,
      default: 'plain',
      validator (val: ComponentTheme): boolean {
        return componentThemeArr.includes(val)
      }
    },
    // 是否显示关闭
    closable: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  emits: ['close'],
  setup (props: TagProps, ctx: SetupContext) {
    const closeClick = (): void => {
      ctx.emit('close')
    }

    return {
      closeClick
    }
  }
})
</script>
